<template>
  <z-modal
    :width="800"
    title="设计表单"
    v-bind="modalOption"
    :fullscreen="true"
    :bodyStyle="{padding:'0px'}"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <KFormDesign class="k-form-design" ref="kfd" @save="handleOk" @close="handleCancel" :showHead="false" />
    </a-spin>
  </z-modal>
</template>

<script>
import ModalMixins from '@/mixins/ModalMixins'
import { putAction } from '@/services/manage'
import { CURY_TYPE } from '@/store/mutation-types'
import { KFormDesign } from '@/components/k-form-design/packages/use.js'

export default {
  name: 'FormDesignModal',
  components: { KFormDesign },
  mixins: [ModalMixins],
  data() {
    return {
      url: {
        save: '/camunda/form/edit'
      },
      formDesignData: '',
      row: {},
      fullscreen: true,
      switchFullscreen: true
    }
  },
  methods: {
    show(row) {
      this.formDesignData = row.model
      this.row = row
      this.visible = true
      this.$nextTick(() => {
        this.setDesignData(this.formDesignData)
      })
    },
    handleOk(data) {
      const rowData = {
        ...this.row,
        model: data,
        crudType: CURY_TYPE.UPDATE
      }
      putAction(this.url.save, rowData).then(res => {
        if (res.success) {
          this.$message.success('保存成功')
          this.close()
          this.$emit('ok')
        }
      })
    },
    setDesignData(data) {
      data && this.$refs.kfd.handleSetData(JSON.parse(data))
    }
  }
}
</script>
<style lang="less">
.k-form-design{
  svg {
    display: inline;
  }
}
</style>
